<template>
  <div class="movie_detail">
    <!-- 上部分背景色 -->
    <div class="bgc"></div>
    <!-- 上部分电影信息 -->
    <div class="info">
      <img :src="movieDetail.cover" alt="" />
      <!-- 基本信息 -->
      <div class="info_right">
        <p class="name">{{ movieDetail.name }}</p>
        <!-- 上部分电影信息 -->
        <el-rate
          v-model="movieDetail.star"
          disabled
          show-score
          text-color="#ff9900"
          score-template="{value}"
          class="star"
        >
        </el-rate>
        <p class="type">电影类型：{{ movieDetail.type }}</p>
        <p class="area/length">
          <span>{{ movieDetail.region }}</span> /
          <span>{{ movieDetail.duration }}分钟</span>
        </p>
        <p class="date">上映日期：{{ movieDetail.releaseTime }} 上映</p>
        <!-- router跳转 -->
        <el-button class="btn" type="primary" @click="toTicket()"
          >特惠购票</el-button
        >
        <el-button class="btn" type="primary" @click="formClick()"
          >评分</el-button
        >
        <!-- 评分对话框 表单 -->
        <el-dialog
          title="电影评分"
          :visible.sync="dialogFormVisible"
          width="30%"
        >
          <el-form :model="form" class="form">
            <el-form-item label="评价星级">
              <el-rate
                v-model="form.star"
                show-score
                text-color="#ff9900"
                class="inside_star"
              >
              </el-rate>
            </el-form-item>
            <el-form-item label="评价内容">
              <el-input
                type="textarea"
                :rows="6"
                v-model="form.content"
                maxlength="1000"
                show-word-limit
                resize="none"
              ></el-input>
            </el-form-item>
          </el-form>
          <span slot="footer" class="dialog-footer">
            <el-button @click="dialogFormVisible = false">取 消</el-button>
            <el-button type="primary" @click="reviewSubmit()"
              >确认提交</el-button
            >
          </span>
        </el-dialog>
      </div>
    </div>
    <!-- 下部分路由 -->
    <div class="main"><router-view /></div>
  </div>
</template>
<script>
import { MovieDetail, ToReview } from "@/api/movie";
import bus from "@/api/eventBus";
export default {
  data() {
    return {
      dialogFormVisible: false,
      movieDetail: {
        // name: "XXXXX",
        // type: "科幻",
        // area: "中国大陆",
        // length: "130",
        // date: "2022年01月14日",
        // star: 3.5,
        // imgAddress: require("@/assets/movie/u2282.svg"),
      },
      form: {
        star: 0,
        content: "",
      },
    };
  },
  mounted() {
    this.getMovieDetail();
  },
  methods: {
    // 评分
    formClick() {
      if(localStorage.getItem("uid")){
      this.form = Object.assign({}, this.$options.data().form);
      this.dialogFormVisible = true;
      }else{
        alert("您还没有登录，请登录后再试！")
      }
    },
    // 获取电影详情
    getMovieDetail() {
      MovieDetail(localStorage.getItem("fid")).then((res) => {
        res.msg = "电影详情-index";
        res.data.releaseTime = this.formatDate(res.data.releaseTime);
        // console.log(res);
        this.movieDetail = res.data;
      });
    },
    // 评分
    reviewSubmit() {
      

        const ReviewData = {
          fid: localStorage.getItem("fid"),
          uid: localStorage.getItem("uid"),
          comment: this.form.content,
          star: this.form.star,
        };
        ToReview(ReviewData).then((res) => {
          if (res.code == 200) {
            this.dialogFormVisible = false;
            // location.reload();
            bus.$emit("reloadReview");
            console.log(res);
            this.$message({
              message: res.msg,
              type: "success",
            });
          } else {
            this.$message({
              message: "评价失败",
              type: "danger",
            });
          }
        });
      
    },
    // 日期格式化
    formatDate(dateint) {
      var date = new Date(parseInt(dateint));
      var str =
        date.getFullYear() + "-" + (date.getMonth() + 1) + "-" + date.getDate();
      return str;
    },
    toTicket() {
      if (localStorage.getItem("uid")) {
        this.$router.push(
          "/movie_detail/ticket?fid=" + localStorage.getItem("fid")
        );
      }else{
        alert("您还没有登录，请登录后再试！")
      }
    },
  },
};
</script>
<style lang="scss" scoped>
.movie_detail {
  width: 1440px;
  height: auto;
  margin: 0 auto;
  .bgc {
    width: 1440px;
    height: 380px;
    background-color: rgb(90, 132, 253);
    position: absolute;
    z-index: -1;
  }
  .info {
    width: 1000px;
    height: 380px;
    margin: 0 auto;
    padding-top: 80px;
    img {
      width: 240px;
      height: 340px;
      float: left;
    }
    .info_right {
      // width: 760px;

      color: white;
      float: left;
      padding-left: 80px;
      p {
        margin: 20px 0;
        font-size: 14px;
      }
      .name {
        font-size: 35px;
        font-weight: bold;
        float: left;
        margin-bottom: 40px;
      }
      .star {
        float: left;
        margin-top: 30px;
        margin-left: 100px;
      }
      .type {
        clear: both;
      }
      .btn {
        width: 120px;
        background-color: rgb(245, 108, 108);
        color: white;
        list-style: none;
      }
    }
    .form {
      .inside_star {
        margin-top: 10px;
        margin-left: 40px;
      }
    }
  }
  .main {
    clear: both;
  }
}
</style>